<template>
	<view class="" style="background-color: white;">
		<uni-popup class="pop" ref="popupRef" borderRadius='10px 10px 0px 0px' backgroundColor='white' type="bottom"
			:animation="true">
			<view class="">
				<view class="headerBox">
					<view class="headerBoxIcon">x</view>
					<view class="headerBoxWord">选择目的地</view>
					<view class=""></view>
				</view>
				<view class="isallbox">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y1"
						@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
						<view id="demo1" class="scroll-view-item uni-bg-red" v-for="(item,index) in addArray">
							<view class="itemDataBox">
								<image class="indexImage" :src="imageUrl+item.scenicImg" mode=""></image>
								<view class="iscardNot">
									<view class="indexImageIndex">{{item.scenicName}}</view>
									<view class="indexImageWord">{{item.scenicDesc}}</view>
								</view>
							</view>
							<view v-if="!item.isselect" @click="selectOnly(index)" class="noselectCard"></view>
							<image v-if="item.isselect" @click="selectOnly(index)" class="selectCardImage"
								src="https://file.whshiyuan.cn:9000/toopu/compressed/9641731381558_compressed_img.png"
								mode=""></image>
						</view>
					</scroll-view>
					<view v-if="isslect==0" class="isoverWord">出于酒店可到达性、出现体验考虑、建议您选择以上目的地</view>
					<view class="isoverButton" @click="besure">继续</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import { imageUrl } from '../../../../config/request/request';
	import { Getloops,PutInfoSave } from '../../../../config/API/Customize';
	const propos = defineProps({
		addArray:{
			type:Array,
			default:()=>[]
		},
		oderid:{
			type:String,
			default:''
		}
	})
	const emits = defineEmits(['addDay'])
	const besure = async() =>{
		if(isselectData.value){
			const itemFrom = {
				order_id:propos.oderid,
				scenicId:isselectData.value.scenicId
			}
			console.log(itemFrom)
			const data =await PutInfoSave(itemFrom)
			if(data.code==200){
				emits('addDay',isselectData.value)
				console.log('添加日期结果',data)
				isselectData.value = null
				popupRef.value.close();
			}
			
		}else{
			uni.showToast({
				title: '请选择一个目的地',
				icon: 'none'
			})
		}
		
	}
	const isslect = ref(0)
	const isselectData = ref()
	const selectOnly = (index) => {
		propos.addArray.forEach((item, idx) => {
			if (idx === index) {
				item.isselect = true;
				isselectData.value = item
				// isslect.value = item.;
			} else {
				item.isselect = false;
				// isslect.value = 1;
			}
		});
		console.log(' isslect.value ', isslect.value)
	};
	const isnumbeHow = (isAdd) => {
		console.log(isAdd)
		if (isAdd==2) {
			number.value +=1 
			// 增加数量
		} else {
			// 减少数量
			if (number.value > 0) {
				number.value -=1 
			}
		}
	};
	const number = ref(0)
	const popupRef = ref(null);
	const isSelect = (index) => {
		selectButton.value.forEach((item, inx) => {
			if(inx == index){
				item.isSelect = true
				isslect.value = item.selectid;
			}else{
				item.isSelect = false
			}
		})
	}
	const exposeMethods = {
		showPopup: (it) => {
			popupRef.value.open();
			isslect.value = it
			console.log('isslect.value ',isslect.value )			
		},
		closePopup: () => {
			popupRef.value.close();
		}
	};

	defineExpose({
		...exposeMethods
	});
</script>

<style scoped>
	.addButton {
		width: 40rpx;
		height: 40rpx;
	}

	.jianbutton {
		width: 35rpx;
		height: 35rpx;
	}

	.numberAll {
		width: 20vw;
		margin-right: 2vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isallbox {
		background-color: rgb(248, 248, 248);
	}

	.isoverWord {
		margin: 0 auto;
		height: 10vw;
		width: 95vw;
		font-size: 24rpx;
		color: #b8b8b8;
	}

	.isoverButton {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: black;
		color: white;
		width: 95vw;
		height: 10vw;
		border-radius: 5rpx;
		margin: 0 auto;
	}

	.indexImageIndex {
		font-size: 38rpx;
		font-weight: 500;
	}

	.indexImageWord {
		font-size: 29rpx;
		color: #b8b8b8;
	}

	.iscardNot {
		margin-left: 15rpx;
	}

	.selectCardImage {
		width: 30rpx;
		height: 30rpx;
	}

	.isroomBox {
		border-radius: 15rpx;
		background-color: white;
		width: 95vw;
		height: 20vw;
		margin: 0 auto;
		justify-content: space-around;
		display: flex;
		align-items: center;
	}

	.noselectCard {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1px solid #333333;
	}

	.indexImageWord {
		margin-top: 10rpx;
		overflow: hidden;
		/* 隐藏溢出的文本 */
		text-overflow: ellipsis;
		/* 使用省略号表示溢出的文本 */
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直排列子元素 */
		-webkit-line-clamp: 3;
		/* 限制显示的行数，这里设置为3行 */
		word-break: break-all;
		/* 防止长单词溢出 */
		width: 200px;
		/* 设置固定宽度或根据需要调整 */
		height: 60px;
		/* 设置固定高度或根据需要调整 */
		line-height: 20px;
		/* 设置行高，确保文字不会被压缩 */
	}

	.indexImage {
		width: 20vw;
		height: 25vw;
		border-radius: 15rpx;
	}

	.itemDataBox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scroll-Y {
		background-color: white;
		border-radius: 15rpx;
		margin: 50rpx auto;
		width: 95vw;
		height: 900rpx;
	}
	.scroll-Y1 {
		background-color: white;
		border-radius: 15rpx;
		margin: 50rpx auto;
		width: 95vw;
		height: 600rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		padding-bottom: 5vw;
		border-bottom: 1px solid #ebebeb;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.noselect {
		color: #c5c5c5;
		font-size: 34rpx;
	}

	.iselect {
		color: #060333;
		font-size: 34rpx;
	}

	.isSelectBox {
		display: flex;
		width: 100vw;
		justify-content: space-around;
		align-items: center;
	}

	.headerBoxIcon {
		font-size: 37rpx;
	}

	.headerBoxWord {
		font-size: 38rpx;
	}

	.isoverButton {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: black;
		color: white;
		width: 95vw;
		height: 10vw;
		border-radius: 5rpx;
		margin: 0 auto;
	}

	.selectCaedBoxNumber {

		font-size: 38rpx;
		margin-top: 5vw;
		color: #333333;
		margin-left: 2.5vw;
	}

	.addButton {
		width: 40rpx;
		height: 40rpx;
	}

	.jianbutton {
		width: 35rpx;
		height: 35rpx;
	}

	.itemCardboxTIME {
		height: 10vw;
		margin: 20rpx auto;
		width: 95vw;
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isYeartitle {
		margin-left: 2vw;
		font-size: 38rpx;
		color: #333333;
	}

	.isYeartitle1 {
		margin-right: 2vw;
		font-size: 38rpx;
		color: #333333;
	}

	.isYearCantect {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #cccccc;
	}

	.isYear {
		display: flex;
		align-items: center;
	}

	.itemCardbox {
		margin: 20rpx auto;
		width: 95vw;
		background-color: white;
		border-radius: 10rpx;
	}

	.numberAll {
		width: 20vw;
		margin-right: 2vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selectCaedBox {
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.selectCaedBoxAll {
		width: 100vw;
		background-color: rgb(248, 248, 248);
	}

	.headerBox {
		width: 95vw;
		display: flex;
		justify-content: space-between;
		margin: 10rpx auto;
	}
</style>